<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
            <el-breadcrumb-item>租赁订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
              <el-form :inline="true" class="demo-form-inline">
                <span>
                <el-form-item label="订单号:">
                  <el-input v-model="orderId" placeholder="请输入订单号"></el-input>
                </el-form-item>
                <el-form-item label="支付状态:">
                  <el-select v-model="statusPay" placeholder="请选择支付状态">
                    <el-option :label="'全部'" :value="2"></el-option>
                    <el-option label="已支付" :value="1"></el-option>
                    <el-option label="未支付" :value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click.prevent="search">查询</el-button>
                </el-form-item></span>
                <span style="margin-left: 500px"><el-button icon="el-icon-circle-plus" circle type="success"
                           size="medium"
                           @click="add">新增订单</el-button></span>
              </el-form>
            </el-row>
            <el-table :data="rentList" border stripe>
                <el-table-column label="订单号" prop="orderId"></el-table-column>
                <el-table-column label="所属市场" prop="marketName"></el-table-column>
                <el-table-column label="摊位名称" prop="stallName" width="120px"></el-table-column>
                <el-table-column label="租金" prop="rentPrice" width="80px"></el-table-column>
                <el-table-column label="租期/个月" prop="rentData" width="80px"></el-table-column>
                <el-table-column label="到期时间" prop="endTime" width="150px"></el-table-column>
                <el-table-column label="当前租户" prop="username" width="80px"></el-table-column>
                <el-table-column label="支付状态" width="80px">
                  <template slot-scope="sc">{{sc.row.statusPay==1?'已支付':'未支付'}}</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row.orderId)">修改</el-button>
                        <el-button type="primary" size="mini" @click="addContract(scope.row)">合同</el-button>
                        <el-button type="danger" size="mini" @click="removeOrderById(scope.row.orderId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[3, 6 , 12, 24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
      <div style="margin-top: 300px;margin-left: 400px">版权所有 © 2022 市场/摊位管理系统，并保留所有权利。</div>

      <!--添加订单-->
      <el-dialog title="新增订单" :visible.sync="addDialogVisible" width="50%" :close-on-click-modal="false">
        <el-form
            :model="addOrderForm"
            :rules="addOrderFormRules"
            ref="addOrderFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="选择客户:" prop="userId">
            <el-select v-model="addOrderForm.userId" placeholder="请选择客户">
              <el-option v-for="u in userList" :label="u.username" :value="u.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择摊位:" prop="stallId">
            <el-select v-model="addOrderForm.stallId" placeholder="请选择摊位">
              <el-option v-for="s in stallList" :label="s.stallName" :value="s.stallId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单成交价:" prop="orderPrice">
            <el-input v-model="addOrderForm.orderPrice"></el-input>
          </el-form-item>
          <el-form-item label="支付状态" prop="statusPay">
            <el-radio-group v-model="addOrderForm.statusPay">
              <el-radio :label="'1'">已支付</el-radio>
              <el-radio :label="'0'">未支付</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="合同:" prop="contract">
            <el-upload
                class="upload-demo"
                drag
                ref="upload"
                accept=".pdf, .doc, .docx"
                :action="uploadUrl"
                :headers="headerObj"
                :limit="1"
                :before-upload="beforeUpload"
                :on-success="upSuccess"
                :on-error="upError"
                name="uploadContract"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">上传文件只能是 pdf、doc、docx格式</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOrder">确 定</el-button>
        <el-button @click="cancelAddOrder">取 消</el-button>
      </span>
      </el-dialog>

      <!--修改订单-->
      <el-dialog title="修改订单" :visible.sync="editDialogVisible" width="50%" :close-on-click-modal="false">
        <el-form
            :model="editOrderForm"
            :rules="editOrderFormRules"
            ref="editOrderFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="选择客户:" prop="userId">
            <el-select v-model="editOrderForm.userId" placeholder="请选择客户">
              <el-option v-for="u in userList" :label="u.username" :value="u.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单成交价:" prop="orderPrice">
            <el-input v-model="editOrderForm.orderPrice"></el-input>
          </el-form-item>
          <el-form-item label="支付状态" prop="statusPay">
            <el-radio-group v-model="editOrderForm.statusPay">
              <el-radio :label="1">已支付</el-radio>
              <el-radio :label="0">未支付</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editOrder">确 定</el-button>
        <el-button @click="cancelEditOrder">取 消</el-button>
      </span>
      </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
              headerObj:{
                token:window.sessionStorage.getItem("token")
              },
              uploadUrl:this.$Url.serverUrl+'/rentOrder/uploadContract',
              addDialogVisible: false,
                editDialogVisible: false,
                pageNum: 1,
                pageSize: 3,
              orderId: '',
              rentList: [],
              userList:[],
              marketList:[],
              stallList:[],
                total: 0,
              statusPay:2,
              addOrderForm:{
                id:'',
                userId:'',
                stallId:'',
                orderPrice:'',
                statusPay:'',
                contract:''
              },
              editOrderForm:{
                id:'',
                marketId:'',
                userId:'',
                stallId:'',
                orderPrice:'',
                statusPay:''
              },
              addOrderFormRules:{
                userId:[
                  {required: true, message: '请选择客户', trigger: 'change'}
                ],
                stallId:[
                  {required: true, message: '请选择摊位', trigger: 'change'}
                ],
                orderPrice:[
                  {required: true, message: '请输入订单成交价', trigger: 'blur'}
                ],
                statusPay:[
                  {required: true, message: '请选择支付状态', trigger: 'change'}
                ]
              },
              editOrderFormRules:{
                userId:[
                  {required: true, message: '请选择客户', trigger: 'change'}
                ],
                orderPrice:[
                  {required: true, message: '请输入订单成交价', trigger: 'blur'}
                ],
                statusPay:[
                  {required: true, message: '请选择支付状态', trigger: 'change'}
                ],
              }
            };
        },
        methods: {
          beforeUpload(file) {
            const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

            const whiteList = ["pdf", "doc", "docx"];

            if (whiteList.indexOf(fileSuffix) === -1) {
              this.$message({
                message: '上传文件只能是 pdf、doc、docx格式',
                type: 'error',
                duration:1000
              });
              return false;
            }

            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isLt2M) {
              this.$message({
                message: '上传文件大小不能超过 2MB',
                type: 'error',
                duration:1000
              });
              return false;
            }
          },
// 上传成功
          upSuccess(res, file) {
            this.$message({
              message: '上传成功',
              type: 'success',
              duration:1000
            });
            this.addOrderForm.contract=res.data;
            console.log(this.addOrderForm.contract);
          },
// 上传失败
          upError(e) {
            this.$message({
              message: '上传失败',
              type: 'error',
              duration:1000
            });
          },
          addContract(row){
            this.$router.push({
              path:'/contractList'
            })
          },
          removeOrderById(orderId){
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let url = '/rentOrder/removeOrderById/'+orderId;
              this.$axios.delete(url)
                  .then((res)=>{
                    if (res.data.code == 200){
                      this.$message({
                        type: 'success',
                        message: res.data.msg,
                        duration:1000
                      });
                      this.initRentList();
                    }else {
                      this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration:1000
                      });
                    }
                  })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          cancelEditOrder(){
            this.editDialogVisible=false;
            this.$refs.editOrderFormRef.resetFields();
          },
          editOrder(){
            let form = this.$refs.editOrderFormRef;
            form.validate((valid) => {
              if (!valid) {
                return;
              } else {
                let url = "/rentOrder/modify";
                this.$axios.put(url,this.editOrderForm).then((res)=>{
                  //res  就是服务器端回应的数据 result
                  console.log(res)
                  if (res.data.code == 200){
                    this.editDialogVisible=false;
                    this.initRentList();
                    this.$message({
                      message: res.data.msg,
                      type: 'success',
                      duration:1000
                    });
                  }else {
                    this.$message({
                      message: res.data.msg,
                      type: 'error',
                      duration:1000
                    });
                  }
                })
              }
            })
          },
          showEditDialog(orderId){
            let url = '/rentOrder/queryRentOrderByOrderId/'+orderId;
            this.$axios.get(url)
                .then((res)=>{
                  if (res.data.code == 200){
                    console.log(res.data.data);
                    this.editOrderForm=res.data.data;
                    this.editDialogVisible = true;
                  }else {
                    this.$message({
                      message: res.data.msg,
                      type: 'error',
                      duration:1000
                    });
                  }
                })
          },

          cancelAddOrder(){
            this.addDialogVisible=false;
            this.$refs.addOrderFormRef.resetFields();
            this.$refs.upload.clearFiles();
          },
          addOrder(){
            let form = this.$refs.addOrderFormRef;
            form.validate((valid) => {
              if (!valid) {
                return;
              } else {
                let url = "/rentOrder/add";
                this.$axios.post(url,this.addOrderForm).then((res)=>{
                  //res  就是服务器端回应的数据 result
                  console.log(res)
                  if (res.data.code == 200){
                    this.addDialogVisible=false;
                    this.initRentList();
                    this.$refs.addOrderFormRef.resetFields();
                    this.$refs.upload.clearFiles();
                    this.$message({
                      message: res.data.msg,
                      type: 'success',
                      duration:1000
                    });
                  }else {
                    this.$message({
                      message: res.data.msg,
                      type: 'error',
                      duration:1000
                    });
                  }
                })
              }
            })
          },
           add(){
             this.addDialogVisible= true;
             this.$refs.addOrderFormRef.resetFields();
           },
          initRentList(){
            let url = "/rentOrder/list";
            this.$axios.get(url,{
              params:{
                now:this.pageNum,
                size:this.pageSize,
                orderId:this.orderId,
                statusPay:this.statusPay
              }
            }).then(res=>{
              if(res.data.code == 200){
                this.rentList = res.data.data.list ;
                this.pageSize = res.data.data.pageSize;
                this.pageNum = res.data.data.pageNum ;
                this.total = res.data.data.total ;
              }else {
                this.$message({
                  type:'error',
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
          },
          initUserList(){
            let url = "/user/showAllUser";
            this.$axios.get(url).then(res=>{
              if(res.data.code == 200){
                this.userList = res.data.data;
              }else {
                this.$message({
                  type:'error',
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
          },
          initStallList(){
            let url = "/stall/showAllUnUsedStall";
            this.$axios.get(url).then(res=>{
              if(res.data.code == 200){
                this.stallList = res.data.data;
              }else {
                this.$message({
                  type:'error',
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
          },
          search() {
                this.initRentList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.initRentList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.initRentList();
            },
          initUser() {
            let strUser = sessionStorage.getItem("managerInfo");
            let user = JSON.parse(strUser);
            this.addOrderForm.id = user.id;
            this.editOrderForm.id = user.id;
          }
        },
        created() {
            this.initRentList();
            this.initStallList();
            this.initUserList();
            this.initUser();
        }
    };
</script>
<style lang="less" scoped>
</style>